
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>当高考作文遇上AI阅卷官 - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>当高考作文遇上AI阅卷官 - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">为什么在高考作文阅卷中需要引入AI技术？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">引入AI旨在缓解传统人工阅卷面临的挑战，如阅卷量巨大、主观性差异、教师疲劳可能导致的评分波动等。AI可以提供一个标准化的、可量化的辅助评估工具，以平衡效率与公平。</div>
          </div>
          <div class="card-source">来源: 为什么需要AI？</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">文档中提到的、用于引导大型语言模型（LLM）分析作文的核心技术是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">核心技术是“Prompt Engineering”（提示工程）。通过精心设计的Prompt，可以为AI设定角色（如“资深高考语文阅卷专家”）、明确任务和评估标准，从而引导它像人类一样对作文进行深入剖析。</div>
          </div>
          <div class="card-source">来源: AI如何分析？</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">AI作文分析可视化报告中包含哪些核心要素？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">可视化报告包含六个核心要素：1. 核心评分雷达图；2. 作文原文与动态高亮；3. 词汇特征分析（如词云图）；4. 情感色彩分析（如情感趋势图）；5. 潜在问题列表；6. AI批改建议。</div>
          </div>
          <div class="card-source">来源: 可视化报告</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">报告中的“动态高亮”功能是如何帮助用户的？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">该功能会在原文中直接高亮显示AI识别出的优秀句段、弱点句段和语法错误。用户可以点击这些高亮部分，查看详细的解释和修改建议，从而获得直观且可操作的反馈。</div>
          </div>
          <div class="card-source">来源: 可视化报告</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">在词汇特征分析方面，报告提供了哪些可视化工具？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">报告提供了两种主要的词汇分析工具：一是“词云图”，用于展示高频词汇及其出现频率，并可能为其赋予情感色彩；二是关于“词汇丰富度与句子复杂度”的分析，通过文字说明或散点图来呈现。</div>
          </div>
          <div class="card-source">来源: 可视化报告</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">AI报告如何对作文的情感进行多维度分析？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">报告通过两种图表进行情感分析：一是“情感趋势折线图”，展现文章各段落情感的起伏变化；二是“情感分布饼图”，直观显示积极、消极、中性情感在整篇文章中的占比。</div>
          </div>
          <div class="card-source">来源: 可视化报告</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">从V1到V3版本，报告在文本高亮与交互性方面有何演进？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">V1版本的高亮是直接在HTML中通过<span>标签静态实现的。V2版本演进为通过JavaScript根据结构化数据动态生成高亮。V3版本则增加了更高级的交互，用户点击高亮区域时，可以在侧边栏或弹出框中看到更详细的说明和建议。</div>
          </div>
          <div class="card-source">来源: V1, V2, V3</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">在V3版本的设想中，词云图是如何被增强以提供更丰富信息的？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">在V3版本中，词云图不仅展示高频词汇，还根据词汇的情感倾向为其设置不同的颜色（例如，积极、消极、中性），从而让用户能更直观地感知文章的整体情感基调和作者的用词偏好。</div>
          </div>
          <div class="card-source">来源: V3</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">根据V3版本的规划，除了常见的评分和文本分析外，还引入了哪些更深层次的分析维度？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">V3版本引入了更深层次的分析，包括：1. 论证逻辑可视化，用于展示段落间的逻辑关系（如递进、转折）；2. 句子复杂度与词汇丰富度的散点图，用于更精细地分析语言表达风格。</div>
          </div>
          <div class="card-source">来源: V3</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
